import o1DrawInterface, {DrawDataNode, DrawInfoData} from "./o1DrawBoard/o1DrawInterface";
import O1HD from "../../engines/gameEngine";
import drawRecord from "./o1DrawBoard/drawRecord";

const {ccclass, property} = cc._decorator;

@ccclass
export default class o1DrawBoard extends cc.Component {

    @property(cc.Graphics)
    drawBoard: cc.Graphics = null;
    @property(cc.Node)
    ndLayerSetColor: cc.Node = null;
    @property({type: cc.Node, displayName: '橡皮擦'})
    ndEmptyNode: cc.Node = null;
    @property(cc.Slider)
    sdSetWidth: cc.Slider = null;
    @property(cc.Graphics)
    drawSetBoard: cc.Graphics = null;
    @property({tooltip: '画笔最小宽度'})
    minLineWidth: number = 2;
    @property({tooltip: '画笔最大宽度'})
    maxLineWidth: number = 50;
    @property(cc.EditBox)
    editDrawName: cc.EditBox = null;
    @property(cc.Prefab)
    pbRecordList: cc.Prefab = null;

    private readonly m_setColors: cc.Color[] = [
        cc.color(0, 0, 0),
        //

        //
        cc.color(255, 0, 0),
        cc.color(255, 128, 0),
        cc.color(255, 255, 0),
        cc.color(0, 255, 0),
        cc.color(0, 255, 255),
        cc.color(0, 0, 255),
        cc.color(128, 0, 255),
        //
        cc.color(64, 64, 0),
        cc.color(0, 64, 64),
        cc.color(64, 0, 64),
        cc.color(128, 128, 0),
        cc.color(0, 128, 128),
        cc.color(128, 0, 128),
        //
        cc.color(255, 0, 128),
        cc.color(255, 128, 128),
        cc.color(255, 128, 255),
        //
        cc.color(128, 255, 0),
        // cc.color(0, 255, 128),
        cc.color(128, 255, 128),
        cc.color(128, 255, 255),
        //
        cc.color(128, 128, 255),
    ];

    onLoad() {
        this.drawBoard.node.on('touchstart', this.onTouchStart.bind(this));
        this.drawBoard.node.on('touchmove', this.onTouchMove.bind(this));
        this.drawBoard.node.on('touchend', this.onTouchEnd.bind(this));
        this.drawBoard.node.on('touchcancel', this.onTouchCancel.bind(this));

        //
        O1HD.off('o1DrawBoard.OnEditDraw');
        O1HD.off('o1DrawBoard.OnDeleteDraw');
        O1HD.on('o1DrawBoard.OnEditDraw', this.OnEditDraw.bind(this));
        O1HD.on('o1DrawBoard.OnDeleteDraw', this.OnDeleteDraw.bind(this));

        //
        this.onInitSetColor();
        this.onInitSetWidth();
        //
        this.onDrawInit();
    }

    start() {
        this.m_o1DrawClass = new o1DrawInterface();
        this.m_o1DrawClass.OnLoadData();
    }

    private m_currColor: cc.Color = null;
    private m_currLineWidth: number = null;
    private m_drawData: DrawInfoData = null;
    private m_o1DrawClass: o1DrawInterface = null;

    onBtnSelectColor(target: cc.Toggle) {
        console.log('选择色', target.node.name);
        const i = target.node.name;
        //
        this.drawBoard.strokeColor = this.drawBoard.fillColor = this.m_setColors[i];
        this.drawBoard.lineWidth = this.minLineWidth + this.sdSetWidth.progress * (this.maxLineWidth - this.minLineWidth);
        //
        this.ndEmptyNode.active = false;
        this.onSetPen();
    }

    onBtnSetWidth() {
        this.drawBoard.lineWidth = this.minLineWidth + this.sdSetWidth.progress * (this.maxLineWidth - this.minLineWidth);
        this.drawBoard.strokeColor = this.drawBoard.fillColor = this.m_currColor;
        this.ndEmptyNode.active = false;
        this.onSetPen();
    }

    onBtnSelectPen() {
        this.ndEmptyNode.active = false;
        this.drawBoard.lineWidth = this.m_currLineWidth;
        this.drawBoard.strokeColor = this.drawBoard.fillColor = this.m_currColor;
    }

    OnBtnSaveData() {
        let name = this.editDrawName.string;
        if (!name) {
            O1HD.getModules().uiControlModule.showMessageBox('未输入名字');
            return;
        }
        this.SaveDrawInfo(name);
        O1HD.getModules().uiControlModule.showMessageBox('已保存');
    }

    OnBtnLoadData() {
        let node = cc.instantiate(this.pbRecordList);
        this.node.addChild(node);
        node.getComponent(drawRecord).bindDrawInterface(this.m_o1DrawClass);
    }

    onBtnClear() {
        this.editDrawName.string = '未命名'
        this.drawBoard.clear();
        this.OnClearDrawData();
    }

    onBtnEmpty() {
        if (this.ndEmptyNode.active) {
            this.onGetPen();
        } else {
            this.drawBoard.lineWidth = this.maxLineWidth * 2;
            this.drawBoard.strokeColor = this.drawBoard.fillColor = this.drawBoard.node.parent.color;
            this.ndEmptyNode.setPosition(this.drawBoard.node.width / 2, this.drawBoard.node.height / 2);
        }
        this.ndEmptyNode.active = !this.ndEmptyNode.active;
    }

    private m_moveCount: number = 0;

    onTouchStart(event: cc.Event.EventTouch) {
        let viewPos = this.drawBoard.node.convertToNodeSpaceAR(event.touch.getLocation());
        viewPos = this.isOutWeb(viewPos);
        this.OnStartDraw(viewPos);
        //
        this.ndEmptyNode.setPosition(viewPos);
        this.m_moveCount = 0;
    }

    onTouchMove(event: cc.Event.EventTouch) {
        this.m_moveCount++;
        let viewPos = this.drawBoard.node.convertToNodeSpaceAR(event.touch.getLocation());
        viewPos = this.isOutWeb(viewPos);
        this.OnIngDraw(viewPos);
        // this.m_moveCount = 0;
        // }
        this.ndEmptyNode.setPosition(viewPos);
    }

    onTouchEnd(event: cc.Event.EventTouch) {
        let viewPos = this.drawBoard.node.convertToNodeSpaceAR(event.touch.getLocation());
        viewPos = this.isOutWeb(viewPos);
    }

    onTouchCancel(event: cc.Event.EventTouch) {
        let viewPos = this.drawBoard.node.convertToNodeSpaceAR(event.touch.getLocation());
        viewPos = this.isOutWeb(viewPos);
    }

    OnBtnExit() {
        this.node.destroy();
    }

    m_updateCount: number = 0;

    private OnDeleteDraw(name: string) {
        this.m_o1DrawClass.DeleteData(name);
    }

    private OnEditDraw(name: string) {
        this.OnClearDrawData();
        this.drawBoard.clear();
        //
        let data = this.m_o1DrawClass.getData(name);
        if (!data) {
            O1HD.getModules().uiControlModule.showMessageBox(`没有找到该画作<${name}>`);
            return;
        }
        //
        this.editDrawName.string = name;
        //
        for (let i = 0; i < data.drawList.length; i++) {
            let {lineWidth, color, x, y, isStart} = data.drawList[i];
            let {r, g, b} = color;
            //
            this.drawBoard.lineWidth = lineWidth;
            this.drawBoard.strokeColor = cc.color(r, g, b);
            //
            if (isStart) {
                this.OnStartDraw(cc.v2(x, y));
            } else {
                this.OnIngDraw(cc.v2(x, y));
            }
        }
    }

    private OnIngDraw(viewPos: cc.Vec2) {
        const {x, y} = viewPos;
        this.drawBoard.lineTo(x, y);
        this.drawBoard.stroke();
        // if (this.m_moveCount > 30) {
        this.drawBoard.moveTo(x, y);
        //
        const {r, g, b} = this.drawBoard.strokeColor;
        this.OnAddDrawList({x, y, color: {r, g, b}, lineWidth: this.drawBoard.lineWidth, isStart: false});
    }

    private OnStartDraw(viewPos: cc.Vec2) {
        let {x, y} = viewPos;
        this.drawBoard.moveTo(x - 1, y - 1);
        this.drawBoard.lineTo(x, y);
        this.drawBoard.stroke();
        //
        const {r, g, b} = this.drawBoard.strokeColor;
        this.OnAddDrawList({x, y, color: {r, g, b}, lineWidth: this.drawBoard.lineWidth, isStart: true});
    }

    private OnClearDrawData() {
        this.m_drawData = null;
    }

    private OnAddDrawList(info: DrawDataNode) {
        if (this.m_drawData == null) {
            this.m_drawData = {name: null, drawList: []};
        }
        this.m_drawData.drawList.push(info);
    }

    //保存绘画信息 名字
    private SaveDrawInfo(name: string) {
        this.m_drawData.name = name;
        if (this.m_o1DrawClass.getData(name)) {
            O1HD.getModules().uiControlModule.showDialogBox('保存', `保存会覆盖之前画作,是否保存<${name}>`, true, isOk => {
                if (isOk) {
                    this.m_o1DrawClass.AddAndWriteDrawData(this.m_drawData);
                }
            }, null, '保存', '取消');
        } else {
            this.m_o1DrawClass.AddAndWriteDrawData(this.m_drawData);
        }
    }

    protected update(dt: number): void {
        this.m_updateCount++;
        if (this.m_updateCount % 2 == 1) {
            // this.drawBoard.stroke();
        }
    }

    private onSetPen() {
        this.m_currColor = this.drawBoard.strokeColor;
        this.m_currLineWidth = this.drawBoard.lineWidth;
        this.onUpdateDrawSetGdi();
    }

    private onGetPen() {
        this.drawBoard.strokeColor = this.drawBoard.fillColor = this.m_currColor;
        this.drawBoard.lineWidth = this.m_currLineWidth;
        this.onUpdateDrawSetGdi();
    }

    private onUpdateDrawSetGdi() {
        this.drawSetBoard.strokeColor = this.drawBoard.strokeColor;
        this.drawSetBoard.lineWidth = this.drawBoard.lineWidth;
        this.drawSetBoard.clear();
        this.drawSetBoard.moveTo(20, 0);
        this.drawSetBoard.bezierCurveTo(0, 40, 35, 100, 20, 150);
        this.drawSetBoard.stroke();
    }

    //是否出界
    private isOutWeb(pos: cc.Vec2): cc.Vec2 {
        let outPos = pos.clone();
        if (pos.x > this.drawBoard.node.width - this.drawBoard.lineWidth / 2) {
            outPos.x = this.drawBoard.node.width - this.drawBoard.lineWidth / 2;
        }
        if (pos.x < this.drawBoard.lineWidth / 2) {
            outPos.x = this.drawBoard.lineWidth / 2;
        }
        if (pos.y > this.drawBoard.node.height - this.drawBoard.lineWidth / 2) {
            outPos.y = this.drawBoard.node.height - this.drawBoard.lineWidth / 2;
        }
        if (pos.y < this.drawBoard.lineWidth / 2) {
            outPos.y = this.drawBoard.lineWidth / 2;
        }
        return outPos;
    }

    private onDrawInit() {
        this.drawBoard.strokeColor = this.drawBoard.fillColor = this.m_setColors[0];
        this.drawBoard.lineWidth = this.minLineWidth;
        this.ndEmptyNode.active = false;
        this.onSetPen();
    }

    private onInitSetWidth() {
        this.sdSetWidth.progress = 0;
    }

    private onInitSetColor() {
        for (let i = 0; i < this.m_setColors.length; i++) {
            let currColor = this.m_setColors[i];
            //
            let child = this.ndLayerSetColor.children[0];
            if (i > 0) {
                child = cc.instantiate(this.ndLayerSetColor.children[0]);
                this.ndLayerSetColor.addChild(child);
            }
            child.name = String(i);
            child.getChildByName('Background').color = currColor;
        }
    }

    // update (dt) {}
}
